<template>
  <div>
    <el-upload
      ref="upload"
      :action="fileUploadUrl"
      :headers="{ Authorization: `Bearer ${$store.state.user.token}` }"
      :data="{ bizType: 'ANNOUNCEMENT' }"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      class="avatar-uploader"
      :disabled="disabled"
    >
      <el-image
        v-if="imgData && imgData.attUrl"
        :src="imgData.attUrl"
        :preview-src-list="disabled ? [imgData.attUrl] : []"
        class="avatar"
      />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <div v-if="!disabled">
      <div class="mt-[12px] text-[12px] leading-[18px] text-[#7E8A9D]">
        支持上传{{ ext.join("、") }}格式且不大于{{ size }}MB
      </div>
    </div>
  </div>
</template>

<script>
import { systemDeleteFile } from "@/api/file";
import { FILE_UPLOAD_URL } from "@/config/api-constant";
export default {
  name: "ImageUpload",
  props: {
    ext: {
      type: Array,
      default: () => ["jpg", "png", "jpeg"],
    },
    // 文件大小多少兆 MB
    size: {
      type: Number,
      default: 2,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      imgData: null,
    };
  },
  computed: {
    fileUploadUrl() {
      return process.env.VUE_APP_API_ROOT + FILE_UPLOAD_URL;
    },
  },
  methods: {
    setImgData(data) {
      this.imgData = data ? Object.assign({}, data) : null;
    },
    async clearImg() {
      const id = this.imgData?.id;
      if (!id) return;
      try {
        await this.$confirm(`确定清空吗？`, "确认信息", {
          type: "warning",
          cancelButtonClass: "common-confirm-cancel-btn",
          confirmButtonClass: "common-confirm-confirm-btn",
        });
        await systemDeleteFile({ id });
        this.imageUrl = null;
        this.imgChange();
      } catch {
        this.$message.warning("已取消清空");
      }
    },
    handleAvatarSuccess(res, file) {
      this.imgData = res.data && res.data.length ? res.data[0] : null;
      this.imgChange();
    },
    beforeAvatarUpload(file) {
      const suffName = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = this.ext.indexOf(suffName) >= 0;
      const isLt2M = file.size / 1024 / 1024 < this.size;
      if (!extension) {
        this.$message.error(`上传文件只支持 ${this.ext.join(" / ")} 格式！`);
      }
      if (!isLt2M) {
        this.$message.error(`上传文件大小不能超过 ${this.size}MB!`);
      }
      return extension && isLt2M;
    },
    imgChange() {
      this.$emit("onImgChange", this.imgData);
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.avatar-uploader) {
  line-height: 0;
}

:deep(.avatar-uploader .el-upload) {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: #409eff;
}

:deep(.avatar-uploader-icon) {
  width: 88px;
  height: 88px;
  font-size: 28px;
  line-height: 88px;
  color: #8c939d;
  text-align: center;
}

:deep(.avatar) {
  display: block;
  width: 88px;
  height: 88px;
}
</style>
